<template>
  <rt-view>
    <rt-detail-header :show-back="true">
      <rt-header-icon slot="icon" icon="rt-portal-default" />
      <rt-header-title :title="detailForm.name" />
      <el-tag size="mini"> 活动编号：{{ detailForm.code }}</el-tag>
      <el-tag effect="plain" size="mini">{{
        detailForm.bbs_campaign_statusname
      }}</el-tag>
      <el-tag size="mini" icon="rt-base-account-number">
        {{ detailForm.readCount }} 人阅读</el-tag
      >
      <template slot="btn">
        <rt-header-button-group :max-btns="8">
          <rt-button
            v-show="detailForm.bbs_campaign_status == 2"
            icon-name="rt-base-disable"
            @click="deactivateRelease"
            >取消发布</rt-button
          >
          <rt-button
            v-show="detailForm.bbs_campaign_status == 1"
            icon-name="rt-portal-able"
            @click="activateRelease"
            >发布</rt-button
          >
          <rt-button icon-name="rt-base-delete" @click="deleteCampaign()"
            >删除</rt-button
          >
          &nbsp;&nbsp;&nbsp;&nbsp;
          <rt-button
            v-show="detailForm.bbs_campaign_status == 1"
            icon-name="rt-base-edit"
            type="primary"
            @click="editCampaign()"
            >编辑</rt-button
          >
        </rt-header-button-group>
      </template>
    </rt-detail-header>
    <rt-content>
      <rt-card>
        <rt-section>
          <el-tabs v-model="activeName" @tab-click="isActiveName">
            <el-tab-pane label="基础信息" name="first">
              <rt-form>
                <div class="rt-form-wrapper">
                  <rt-row :gutter="30">
                    <rt-col :span="13">
                      <rt-form-item label="活动名称">
                        <rt-input
                          v-model="detailForm.name"
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                    <rt-col :span="1">
                      <rt-form-item />
                    </rt-col>
                    <rt-col :span="5">
                      <rt-form-item label="开始时间">
                        <rt-input
                          v-model="detailForm.start_time"
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                    <rt-col :span="5">
                      <rt-form-item label="结束时间">
                        <rt-input
                          v-model="detailForm.end_time"
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="30">
                    <rt-col :span="16">
                      <rt-form-item label="活动地点">
                        <rt-input
                          v-model="detailForm.address"
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                    <rt-col :span="2">
                      <rt-form-item />
                    </rt-col>
                    <rt-col :span="6">
                      <rt-form-item label="主讲人姓名">
                        <rt-input
                          v-model="detailForm.speaker"
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="30">
                    <rt-col :span="24">
                      <rt-form-item label="主讲人介绍">
                        <rt-input
                          v-model="detailForm.speaker_brief"
                          type="textarea"
                          autosize
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="30">
                    <rt-col :span="24">
                      <rt-form-item label="活动链接">
                        <rt-input
                          v-model="detailForm.bbs_campaign_link"
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="30">
                    <rt-col :span="24">
                      <rt-form-item label="备注">
                        <rt-input
                          v-model="detailForm.remark"
                          type="textarea"
                          autosize
                          readonly
                          placeholder="暂无"
                        />
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="30">
                    <rt-col :span="8">
                      <rt-form-item>
                        <el-checkbox
                          v-model="detailForm.is_display_start_page"
                          disabled
                          >在启动页展示</el-checkbox
                        >
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                  <rt-row :gutter="30">
                    <rt-col :span="10">
                      <rt-form-item label="启动图" prop="stfile">
                        <el-image
                          :src="detailForm.start_page"
                          :preview-src-list="stFileList"
                          style="width: 150px; height: 150px; padding-top: 10px"
                        >
                          <div slot="error">
                            <el-image
                              :src="require('../../assets/imgs/noimg.png')"
                              fit="cover"
                              style="width: 120px; height: 120px"
                            />
                          </div>
                        </el-image>
                      </rt-form-item>
                    </rt-col>
                    <rt-col :span="10">
                      <rt-form-item label="封面图/宣传图" prop="file">
                        <el-image
                          :src="detailForm.avatar"
                          :preview-src-list="fileList"
                          style="width: 150px; height: 150px; padding-top: 10px"
                        >
                          <div slot="error">
                            <el-image
                              :src="require('../../assets/imgs/noimg.png')"
                              fit="cover"
                              style="width: 120px; height: 120px"
                            />
                          </div>
                        </el-image>
                      </rt-form-item>
                    </rt-col>
                  </rt-row>
                </div>
              </rt-form>
            </el-tab-pane>
            <el-tab-pane label="分享明细" name="second">
              <rt-table
                :total-record="sharedTableTotals"
                :fetch="sharedFetch"
                :sectionable="false"
              >
                <rt-table-column sortable label="分享时间">
                  <template slot-scope="scope">
                    {{ scope.row.createdon | moment('YYYY-MM-DD HH:mm') }}
                  </template>
                </rt-table-column>
                <rt-table-column sortable prop="nickname" label="昵称" />
                <rt-table-column
                  sortable
                  prop="bbs_account_name"
                  label="客户名称"
                />
                <rt-table-column sortable prop="name" label="姓名" />
                <rt-table-column
                  sortable
                  prop="mobilephone"
                  label="电话"
                /> </rt-table
              ><br />
            </el-tab-pane>
            <el-tab-pane label="报名明细" name="third">
              <rt-table
                ref="table"
                :total-record="campaignSignUpTableTotals"
                :fetch="campaignSignUpFetch"
                :sectionable="false"
              >
                <rt-table-column sortable label="报名时间">
                  <template slot-scope="scope">
                    {{ scope.row.createdon | moment('YYYY-MM-DD HH:mm') }}
                  </template>
                </rt-table-column>
                <rt-table-column sortable prop="nickname" label="昵称" />
                <rt-table-column
                  sortable
                  prop="bbs_account_name"
                  label="客户名称"
                />
                <rt-table-column sortable prop="name" label="姓名" />
                <rt-table-column sortable prop="mobilephone" label="电话" />
              </rt-table>
              <br />
            </el-tab-pane>
          </el-tabs> </rt-section
      ></rt-card>
      <rt-card v-show="isShowContent">
        <rt-section title="活动内容">
          <div class="c-content" v-html="detailForm.campaign_brief" />
        </rt-section>
      </rt-card>
    </rt-content>
  </rt-view>
</template>
<script>
import util from '../../libs/util';
export default {
  data() {
    return {
      activeName: 'first',
      isShowContent: true,
      id: '',
      fileList: [],
      stFileList: [],
      uploadChange: false,
      detailForm: {
        address: '',
        avatar: '',
        start_page: '',
        bbs_campaign_link: '',
        bbs_campaignid: '',
        campaign_brief: '',
        bbs_campaign_status: '',
        bbs_campaign_statusname: '',
        code: null,
        is_display_start_page: true,
        name: '',
        readCount: null,
        remark: '',
        speaker: '',
        speaker_brief: '',
        start_time: '',
        end_time: '',
        campaignId: ''
      },
      sharedParam: {},
      sharedTableTotals: 0,
      campaignSignUpTableTotals: 0
    };
  },
  computed: {},
  mounted: function() {
    if (this.$route.params.id != null && this.$route.params.id != undefined) {
      this.id = this.$route.params.id;
      this.sharedParam.object_id = this.id;
    }
    this.getCampaignById();
  },
  methods: {
    isActiveName(tab, event) {
      if (tab.name === 'first') {
        this.isShowContent = true;
      } else {
        this.isShowContent = false;
      }
    },
    getCampaignById() {
      rt.get(`api/bbs/campaign/getcampaignvo/${this.id}`)
        .then(res => {
          this.detailForm = res;
          this.fileList = [util.showRemotePic(res.avatar)];
          this.stFileList = [util.showRemotePic(res.start_page)];
          this.detailForm.avatar = util.showRemotePic(res.avatar);
          this.detailForm.start_page = util.showRemotePic(res.start_page);
        })
        .catch(error => {
          rt.showErrorToast(error);
        });
    },
    changeFile(file) {
      this.file = file.raw;
      // this.formData.append('file', file.raw);
      this.uploadChange = true;
      const maxSize = 500 * 1024;
      if (file.size > maxSize) {
        rt.showErrorToast('上传图片最大不能大于500k');
        this.isUpload = false;
        this.fileList = [];
        return false;
      }
    },
    handleRemove(file, fileList) {
      this.fileList = [];
      this.uploadChange = true;
    },
    editCampaign() {
      this.$router.replace({
        name: 'bbscampaignedit',
        params: { id: this.id }
      });
    },
    deleteCampaign() {
      if (this.detailForm.bbs_campaign_status == 2) {
        rt.showErrorToast('已发布的活动不能被删除');
        return;
      }
      this.$confirm('确认要删除该条数据？', '保存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          rt.post(`api/bbs/campaign/singledelete/${this.id}`)
            .then(res => {
              rt.showSuccessToast('删除成功');
              this.$router.push({
                name: 'campaign-list'
              });
            })
            .catch(error => {
              rt.showErrorToast(error);
            });
        })
        .catch(() => {
          rt.showSuccessToast('已取消删除');
        });
    },
    activateRelease() {
      this.$confirm('确定发布活动么？', '保存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          rt.post(`api/bbs/campaign/activaterelease/${this.id}`)
            .then(res => {
              rt.showSuccessToast('发布成功');
              this.getCampaignById();
            })
            .catch(error => {
              rt.showErrorToast(error);
            });
        })
        .catch(() => {
          rt.showSuccessToast('已取消');
        });
    },
    deactivateRelease() {
      this.$confirm('确认要取消发布该条数据？', '保存', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          rt.post(`api/bbs/campaign/deactivaterelease/${this.id}`)
            .then(res => {
              rt.showSuccessToast('活动取消发布');
              this.getCampaignById();
            })
            .catch(error => {
              rt.showErrorToast(error);
            });
        })
        .catch(() => {
          rt.showSuccessToast('已取消');
        });
    },
    //分享明细
    sharedFetch(page) {
      this.sharedParam.pageSize = page.pageSize;
      this.sharedParam.pageIndex = page.pageIndex;
      return new Promise(resolve => {
        rt.post('/api/bbs/sharedlog/serchshared', this.sharedParam).then(
          res => {
            this.sharedTableTotals = res.count;
            resolve(res.list);
          }
        );
      });
    },
    campaignSignUpFetch(page) {
      this.sharedParam.pageSize = page.pageSize;
      this.sharedParam.pageIndex = page.pageIndex;
      return new Promise(resolve => {
        rt.post(
          'api/bbs/camppaignsignup/serchcampaignsignup',
          this.sharedParam
        ).then(res => {
          this.campaignSignUpTableTotals = res.count;
          resolve(res.list);
        });
      });
    }
  }
};
</script>
<style>
.c-content {
  padding-top: 10px;
  line-height: 30px;
  margin-top: 20px;
  padding-bottom: 20px;
  margin: auto 25px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
